<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- treeview -->
    <link th:href="@{/static/admin/assets/js/bootstrap/bootstrap-treeview/css/bootstrap-treeview.css}"
          rel="stylesheet"/>

    <style type="text/css">
        .content-wrap {
            padding: 0px;
        }

        body {
            color: #9ea7b3;
            font-family: "Open Sans", Arial, sans-serif !important;
            font-size: 13px !important;
            line-height: 20px;
            overflow-x: hidden !important;
            min-height: 100%;
            z-index: -2;
            margin: 0px !important;
            background: url() no-repeat top center fixed;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        label.error {
            position: absolute;
            right: 18px;
            top: 5px;
            color: #ef392b;
            font-size: 12px;
        }
    </style>

</head>

<body>

<div class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="nest" id="elementClose">
                <div class="">
                </div>
                <div class="body-nest" id="element">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">角色名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="name" name="name"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="prem" id="prem">
                                <label class="col-sm-3 control-label ">权限配置：</label>
                                <div class="col-sm-8">
                                    <div id="tree"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-control-static col-sm-offset-9">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!--bootstarp threeView -->
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-treeview/js/bootstrap-treeview.js}"
        type="text/javascript"></script>


<script type="text/javascript">
    $("#form-add").validate({
        rules: {
            name: {
                required: true,
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: rootPath + "/RoleController/checkNameUnique",
                    type: "post",
                    dataType: "json",
                    dataFilter: function (data, type) {
                        if (data == "0")
                            return true;
                        else
                            return false;
                    }
                }
            }
        },
        messages: {
            "name": {
                remote: "角色已经存在"
            }
        },
        submitHandler: function (form) {
            add();
        }
    });

    function add() {
        var x = $('#tree').treeview('getChecked');
        var prem = selectNodeIdArr(x);
        $("#prem").val(prem.join(","));
        var dataFormJson = $("#form-add").serialize();
        $.ajax({
            cache: true,
            type: "POST",
            url: rootPath + "/RoleController/add",
            data: dataFormJson,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.saveSuccess(data);
            }
        });
    }
</script>

<script type="text/javascript">
    /***权限配置***/

    function getTree() {

        var tree = [];
        $.ajax({
            url: rootPath + "/PremissionController/getThreePerm",
            type: "get",
            async: false,
            cache: true,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                if (!$.common.isEmpty(data) && data.key == 200) {
                    tree.push(data.data);
                }
            }


        })
        return tree;
    }

    /**
     * 获取子节点
     */
    function getChildNodeIdArr(node) {
        var ts = [];
        if (node.nodes) {
            for (x in node.nodes) {
                ts.push(node.nodes[x].nodeId);
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                    for (j in getNodeDieDai) {
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        } else {
            ts.push(node.nodeId);
        }
        return ts;
    }

    /**
     * 获取传入的选中节点id
     */
    function selectNodeIdArr(data) {
        var ids = [];
        if (data) {
            for (x in data) {
                ids.push(data[x].id);
            }
        }
        return ids;
    }

    //选中父节点时，选中所有子节点
    function getChildNodeIdArr(node) {
        var ts = [];
        if (node.nodes) {
            for (x in node.nodes) {
                ts.push(node.nodes[x].nodeId);
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                    for (j in getNodeDieDai) {
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        } else {
            ts.push(node.nodeId);
        }
        return ts;
    }

    //选中所有子节点时，选中父节点 取消子节点时取消父节点
    function setParentNodeCheck(node) {
        var parentNode = $("#tree").treeview("getNode", node.parentId);
        if (parentNode.nodes) {
            var checkedCount = 0;
            for (x in parentNode.nodes) {
                if (parentNode.nodes[x].state.checked) {
                    checkedCount++;
                } else {
                    break;
                }
            }
            if (checkedCount == parentNode.nodes.length) {  //如果子节点全部被选 父全选
                $("#tree").treeview("checkNode", parentNode.nodeId);
                setParentNodeCheck(parentNode);
            } else {   //如果子节点未全部被选 父未全选
                // $('#tree').treeview('uncheckNode', parentNode.nodeId);
                // setParentNodeCheck(parentNode);
            }
        }
    }

    //取消父节点时 取消所有子节点
    function setChildNodeUncheck(node) {
        if (node.nodes) {
            var ts = [];    //当前节点子集中未被选中的集合
            for (x in node.nodes) {
                if (!node.nodes[x].state.checked) {
                    ts.push(node.nodes[x].nodeId);
                }
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = node.nodes[x];

                    for (j in getNodeDieDai) {
                        if (!getNodeDieDai.state.checked) {
                            ts.push(getNodeDieDai[j]);
                        }
                    }
                }
            }
        }
        return ts;
    }


    $(function () {

        $('#tree').treeview({
            levels: 1,
            showCheckbox: 1,//这里之所以写1，是因为我引得js源码里定义1为true
            multiSelect: 1,//这里之所以写1，是因为我引得js源码里定义1为true
            data: getTree(),
            color: "#000000",//设置字体加载颜色
            backColor: "#FFFFFF",//设置背景颜色
            selectedColor: "#428bca",//设置选中的字体颜色
            onNodeSelected: function (event, data) {
                // 事件代码...
                //console.log(data);
            },
            onNodeChecked: function (event, node) { //选中节点
                var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                if (selectNodes) { //子节点不为空，则选中所有子节点
                    $('#tree').treeview('checkNode', [selectNodes, {silent: true}]);
                }
                var parentNode = $("#tree").treeview("getNode", node.parentId);
                setParentNodeCheck(node);
            },
            onNodeUnchecked: function (event, node) { //取消选中节点
                // 取消父节点 子节点取消
                var selectNodes = setChildNodeUncheck(node); //获取未被选中的子节点
                var childNodes = getChildNodeIdArr(node); //获取所有子节点
                if (selectNodes && selectNodes.length == 0) { //有子节点且未被选中的子节点数目为0，则取消选中所有子节点

                    $('#tree').treeview('uncheckNode', [childNodes, {silent: true}]);
                }
                // 取消节点 父节点取消
                var parentNode = $("#tree").treeview("getNode", node.parentId); //获取父节点
                var selectNodes = getChildNodeIdArr(node);
                setParentNodeCheck(node);
            }

        });

    })
</script>

</body>


</html>
